<template>
  <div class="forgot-bg">
    <div class="forgot-card">
      <h2>找回密码</h2>
      <p class="desc">请输入您的注册手机号，我们将发送验证码</p>
      <form class="forgot-form" @submit.prevent="handleSubmit">
        <div class="input-group">
          <span class="input-icon"><i class="icon icon-phone"></i></span>
          <input type="text" v-model="phone" placeholder="请输入手机号" maxlength="11" :class="{ 'input-error': phoneError }" />
          <button type="button" class="send-code-btn" :disabled="codeSending || !phone || phoneError" @click="sendCode">{{ codeSending ? (countdown > 0 ? `${countdown}s后重试` : '发送中...') : '发送验证码' }}</button>
        </div>
        <span v-if="phoneError" class="error-message">{{ phoneError }}</span>
        <div class="input-group">
          <span class="input-icon"><i class="icon icon-key"></i></span>
          <input type="text" v-model="code" placeholder="请输入验证码" :class="{ 'input-error': codeError }" />
        </div>
        <span v-if="codeError" class="error-message">{{ codeError }}</span>
        <div class="input-group">
          <span class="input-icon"><i class="icon icon-lock"></i></span>
          <input type="password" v-model="newPassword" placeholder="请输入新密码" :class="{ 'input-error': passwordError }" />
        </div>
        <span v-if="passwordError" class="error-message">{{ passwordError }}</span>
        <button type="submit">重置密码</button>
      </form>
      <router-link to="/login" class="back-link">返回登录</router-link>
      <p v-if="msg" class="msg">{{ msg }}</p>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const phone = ref('')
const code = ref('')
const newPassword = ref('')
const phoneError = ref('')
const codeError = ref('')
const passwordError = ref('')
const codeSending = ref(false)
const countdown = ref(0)
const msg = ref('')
const router = useRouter()
let timer = null
function validatePhone(phoneStr) {
  return /^1[3-9]\d{9}$/.test(phoneStr)
}
function sendCode() {
  phoneError.value = ''
  if (!phone.value) {
    phoneError.value = '手机号不能为空'
    return
  }
  if (!validatePhone(phone.value)) {
    phoneError.value = '手机号格式不正确'
    return
  }
  codeSending.value = true
  countdown.value = 60
  msg.value = '验证码已发送到手机号（模拟）'
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      codeSending.value = false
    }
  }, 1000)
}
function handleSubmit() {
  phoneError.value = ''
  codeError.value = ''
  passwordError.value = ''
  if (!phone.value) {
    phoneError.value = '手机号不能为空'
    return
  }
  if (!validatePhone(phone.value)) {
    phoneError.value = '手机号格式不正确'
    return
  }
  if (!code.value) {
    codeError.value = '验证码不能为空'
    return
  }
  if (!newPassword.value) {
    passwordError.value = '新密码不能为空'
    return
  }
  if (newPassword.value.length < 6) {
    passwordError.value = '密码长度不能少于6位'
    return
  }
  msg.value = '密码重置成功，正在跳转登录...'
  setTimeout(() => {
    router.push('/login')
  }, 1500)
}
</script>
<style scoped>
.forgot-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.forgot-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(37,99,235,0.10);
  padding: 40px 32px 32px 32px;
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.forgot-card h2 {
  color: #2563eb;
  margin-bottom: 10px;
}
.desc {
  color: #888;
  font-size: 1em;
  margin-bottom: 18px;
}
.forgot-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.forgot-form input {
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 1em;
}
.forgot-form button {
  background: linear-gradient(90deg, #2563eb 60%, #4f8cff 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 0;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.forgot-form button:hover {
  background: linear-gradient(90deg, #1e40af 60%, #2563eb 100%);
}
.back-link {
  color: #2563eb;
  text-decoration: underline;
  margin-top: 8px;
  font-size: 0.98em;
}
.back-link:hover {
  color: #1e40af;
}
.msg {
  color: #16a34a;
  margin-top: 10px;
}
.send-code-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.98em;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}
.send-code-btn:disabled {
  background: #b3b3b3;
  cursor: not-allowed;
}
.input-group {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.input-icon {
  position: absolute;
  left: 12px;
  color: #b3b3b3;
  font-size: 1.1em;
}
.error-message {
  color: #e74c3c;
  font-size: 0.95em;
  margin-bottom: 2px;
  margin-left: 2px;
}
</style> 